<template>
  <div>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <el-form :model="formData" label-width="120px" size="mini">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="盘点单号" required>
                <el-input v-model="formData.orderNumber" placeholder="系统自动生成" disabled></el-input>
              </el-form-item>
              <el-form-item label="计划开始时间" required>
                <el-date-picker v-model="formData.startTime" placeholder="请选择时间" style="width: 100%;"></el-date-picker>
              </el-form-item>
              <el-form-item label="移动端配置">
                <el-checkbox-group v-model="formData.mobileOptions">
                  <el-checkbox label="仅允许拍照上传(不允许从相册选择)"></el-checkbox>
                  <el-checkbox label="盘点时必须上传设备拍照"></el-checkbox>
                  <el-checkbox label="必须扫码盘点"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="备注">
                <el-input type="textarea" v-model="formData.remarks" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务名称" required>
                <el-input v-model="formData.taskName" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="计划结束时间" required>
                <el-date-picker v-model="formData.endTime" placeholder="请选择时间" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>

    <div>
      <el-card class="box-card2">
        <div slot="header" class="clearfix">
          <span>盘点范围</span>
        </div>
        <el-form :model="formData2" label-width="100px" size="mini">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="使用部门">
                <el-select v-model="formData2.department" placeholder="请选择" style="width: 70%;" disabled>
                  <el-option label="部门1" value="1"></el-option>
                  <el-option label="部门2" value="2"></el-option>
                </el-select>
                <el-checkbox v-model="formData2.departmentAll" style="margin-left: 30px;">全部</el-checkbox>
              </el-form-item>

              <el-form-item label="设备类型">
                <el-select v-model="formData.deviceType" placeholder="请选择" style="width: 70%;">
                  <el-option label="类型1" value="1"></el-option>
                  <el-option label="类型2" value="2"></el-option>
                </el-select>
                <el-checkbox v-model="formData2.deviceTypeAll" style="margin-left: 30px;">全部</el-checkbox>
              </el-form-item>

              <el-form-item label="设备状态">
                <el-select v-model="formData.deviceStatus" placeholder="请选择" style="width: 70%;">
                  <el-option label="正常" value="normal"></el-option>
                  <el-option label="维修" value="repair"></el-option>
                </el-select>
                <el-checkbox v-model="formData2.deviceStatusAll" style="margin-left: 30px;">全部</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="盘点字段">
                <el-checkbox-group v-model="formData2.checkFields">
                  <el-checkbox label="设备编号"></el-checkbox>
                  <el-checkbox label="设备名称"></el-checkbox>
                  <el-checkbox label="设备类型"></el-checkbox>
                  <el-checkbox label="规格型号"></el-checkbox>
                  <el-checkbox label="制造国别"></el-checkbox>
                  <el-checkbox label="生产厂家"></el-checkbox>
                  <el-checkbox label="出厂编号"></el-checkbox>
                  <el-checkbox label="品牌"></el-checkbox>
                  <el-checkbox label="出厂日期"></el-checkbox>
                  <el-checkbox label="总功率（kw）"></el-checkbox>
                  <el-checkbox label="重量（吨）"></el-checkbox>
                  <el-checkbox label="设备用途"></el-checkbox>
                  <el-checkbox label="存放位置"></el-checkbox>
                  <el-checkbox label="当前状态"></el-checkbox>
                  <el-checkbox label="使用部门"></el-checkbox>
                  <el-checkbox label="设备负责人"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>

    <div>
      <el-card class="box-card3">
        <div slot="header" class="clearfix">
          <span>盘点人员</span>
        </div>
        <el-form :model="formData3" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="盘点部门" required>
                <el-input v-model="formData3.department" placeholder="请输入" suffix-icon="el-icon-search"
                  @click.native="xuan2"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="盘点人员" required>
                <el-input v-model="formData3.personnel" placeholder="请输入" suffix-icon="el-icon-search"
                  @click.native="xuan"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <!--选择人员弹窗-->
    <el-dialog :visible.sync="centerDialogVisible" title="选择人员" width="500px">
      <el-input v-model="search" placeholder="请输入搜索" prefix-icon="el-icon-search"
        style="margin-bottom: 10px;"></el-input>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-tree :data="treeData" :props="defaultProps" node-key="id" highlight-current default-expand-all
            @node-click="handleNodeClick">
          </el-tree>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never" class="box-card5">
            <div slot="header" class="clearfix">
              <span>已选对象 {{ selectedNodes.length }}</span>
              <el-button type="text" @click="clearSelection" style="float: right; padding: 3px 0;">清空</el-button>
            </div>
            <el-tag v-for="(node, index) in selectedNodes" :key="index" closable @close="removeNode(node)">
              {{ node.label }}
            </el-tag>
          </el-card>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSelection">确认</el-button>
      </div>
    </el-dialog>
    <!--选择部门弹窗-->
    <el-dialog :visible.sync="centerDialogVisible2" title="选择人员" width="500px">
      <el-input v-model="search" placeholder="请输入搜索" prefix-icon="el-icon-search"
        style="margin-bottom: 10px;"></el-input>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-tree :data="treeData2" :props="defaultProps2" node-key="id" highlight-current default-expand-all
            @node-click="handleNodeClick2">
          </el-tree>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never" class="box-card5">
            <div slot="header" class="clearfix">
              <span>已选对象 {{ selectedNodes2.length }}</span>
              <el-button type="text" @click="clearSelection2" style="float: right; padding: 3px 0;">清空</el-button>
            </div>
            <el-tag v-for="(node, index) in selectedNodes2" :key="index" closable @close="removeNode2(node)">
              {{ node.label }}
            </el-tag>
          </el-card>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="confirmSelection2">确认</el-button>
      </div>
    </el-dialog>
    <div style="height: 130px;">
      <el-footer class="footer">
        <el-button @click="handleCancel" style="margin-top: 20px; margin-left: -140px;">关闭</el-button>
        <el-button type="primary" @click="handleConfirm" style="margin-top: 20px; margin-left: 20px;">确认</el-button>
      </el-footer>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //选择部门
      selectedNodes2: [],
      treeData2: [
        {
          label: 'XXXX科技有限公司',
          children: [
            {
              label: '项目部',
              children: [
                { label: '王虎部' },
                { label: '于红部' },
              ],
            },
            {
              label: '设计部',
              children: [
                { label: '丁坤部' },
                { label: '吴婷部' },
              ],
            },
            {
              label: '财务部',
              children: [
                { label: '马书奇部' },
                { label: '曹爽部' },
              ],
            },
            {
              label: '人事部',
              children: [
                { label: '王志强部' },
              ],
            },
          ],
        },
      ],
      defaultProps2: {
        children: 'children',
        label: 'label',
      },
      //部门选择弹窗
      centerDialogVisible2: false,
      //选择人员数据
      selectedNodes: [],
      treeData: [
        {
          label: 'XXXX科技有限公司',
          children: [
            {
              label: '项目部',
              children: [
                { label: '王虎' },
                { label: '于红' },
              ],
            },
            {
              label: '设计部',
              children: [
                { label: '丁坤' },
                { label: '吴婷' },
              ],
            },
            {
              label: '财务部',
              children: [
                { label: '马书奇' },
                { label: '曹爽' },
              ],
            },
            {
              label: '人事部',
              children: [
                { label: '王志强' },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      //人员选择弹窗
      centerDialogVisible: false,
      //盘点人员
      formData3: {
        department: '',
        personnel: ''
      },
      //盘点范围
      formData2: {
        department: '',
        departmentAll: false,
        deviceType: '',
        deviceTypeAll: false,
        deviceStatus: '',
        deviceStatusAll: false,
        checkFields: []
      },
      //基础信息
      formData: {
        orderNumber: '',
        taskName: '',
        startTime: null,
        endTime: null,
        mobileOptions: [],
        remarks: ''
      }
    };
  },
  methods: {
    xuan() {
      this.centerDialogVisible = true

    },
    xuan2() {
      this.centerDialogVisible2 = true
    },
    //选择人员
    handleNodeClick(data) {
      console.log("选择数据", data)
      if (!this.selectedNodes.includes(data) && data.children == null) {
        this.selectedNodes = []
        this.selectedNodes.push(data);
      }
    },
    removeNode(node) {
      this.selectedNodes = this.selectedNodes.filter(n => n !== node);
    },
    clearSelection() {
      this.selectedNodes = [];

    },
    confirmSelection() {
      this.formData3.personnel = this.selectedNodes[0].label
      this.centerDialogVisible = false
    },
    //选择部门
    handleNodeClick2(data) {
      console.log("选择数据", data)
      if (!this.selectedNodes2.includes(data) && data.children == null) {
        this.selectedNodes2 = []
        this.selectedNodes2.push(data);
      }
    },
    removeNode2(node) {
      this.selectedNodes2 = this.selectedNodes2.filter(n => n !== node);
    },
    clearSelection2() {
      this.selectedNodes2 = [];
    },
    confirmSelection2() {
      this.formData3.department = this.selectedNodes2[0].label
      this.centerDialogVisible2 = false
    },

    //确认取消
    handleCancel() {
      this.$router.go(-1)
    },
    handleConfirm() {
      alert('确认操作');
    },
  }
};
</script>

<style scoped>
/* 可以在这里定义样式 */
.box-card5 {
  width: 200px;
  height: 300px;
}

.fixed-footer-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer {
  text-align: center;
  background-color: #eeeded;
  position: fixed;
  bottom: 0;
  z-index: 12;
  width: 100%;
}

.box-card {
  width: 1254px;
  margin-left: 30px;
  margin-top: 20px;
  height: 330px;
}

.box-card2 {
  width: 1254px;
  margin-left: 30px;
  margin-top: 20px;
}

.box-card3 {
  width: 1254px;
  margin-left: 30px;
  margin-top: 20px;
  height: 200px;
}
</style>
